<template>
  <div>我是一个APP组件</div>
  <Count />
  <hr >
  <LoveTalk />
  <hr>
  <h2>插槽</h2>
  <div class="games">
    <SoltComp>
      <template v-slot="params">
        <ul>
          <li v-for="g in params.games" :key="g.id">{{g.name}}</li>
        </ul>
      </template>
    </SoltComp>
    <SoltComp>
      <template v-slot="params">
        <ol>
          <li v-for="g in params.games" :key="g.id">{{g.name}}</li>
        </ol>
      </template>
    </SoltComp>
    <PersonProps />
  </div>
</template>

<script setup lang="ts" name="App">
    import Count from './components/Count.vue';
    import LoveTalk from './components/LoveTalk.vue';
    import SoltComp from './components/SoltComp.vue';
    import PersonProps from './components/PersonProps.vue';

</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #0753ea;
  margin-top: 60px;
}

.games{
  display: flex;
  justify-content: space-around;
}
</style>
